<template>
  <div class="app-container flex-col" v-loading="pageLoading">
    <div class="p-20">
      <el-row :gutter="30">
        <el-col :span="15">
          <line-group :functionName="functionName" :data="initData" @onClear="onClearGroupOrEmp"
            @onChange="checkLineGroup">
          </line-group>
        </el-col>
        <el-col :span="9">
          <emp-scan :data="initData" :focus.sync="empFocus" @onClear="onClearGroupOrEmp" @onChange="afterScanEmp">
          </emp-scan>
        </el-col>
      </el-row>
    </div>
    <div class="p-20 z-border-t">
      <div class="flex flex-center">
        <span class="mr-20">请扫描产品序号</span>
        <el-input class="flex1 z-scan" v-model="scanData" ref="scan" @keyup.enter.native="afterScan" size="large"
          :disabled="!canScan"></el-input>
        <span class="ml-20 mr-20">请扫描物料</span>
        <el-input class="flex1 z-scan" v-model="scanMaterialData" ref="scanMaterial"
          @keyup.enter.native="afterScanMaterial" size="large" :disabled="!canScanMaterial"></el-input>
      </div>
    </div>
    <div class="flex1 flex z-border-t" style="overflow-x: hidden; overflow-y: auto;">
      <div class="p-20 z-panel z-border-r" style="width: 30%;">
        <div class="z-panel-title">产品信息</div>
        <div class="z-panel-body">
          <el-row>
            <el-col class="col-left" :span="8">产品编码: </el-col>
            <el-col class="col-right" :span="16">{{ mo.material_code }}</el-col>
          </el-row>
          <el-row>
            <el-col class="col-left" :span="8">产品名称: </el-col>
            <el-col class="col-right" :span="16">{{ mo.material_name }}</el-col>
          </el-row>
          <el-row style="margin-top:15px">
            <el-col :span="8" class="col-left">工单号: </el-col>
            <el-col class="col-right" :span="16">{{ mo.mo_no }}</el-col>
          </el-row>
          <el-row>
            <el-col class="col-left" :span="8">目标量: </el-col>
            <el-col class="col-right" :span="16">{{ mo.target_qty }}</el-col>
          </el-row>
          <el-row>
            <el-col class="col-left" :span="8">投入量: </el-col>
            <el-col class="col-right" :span="16">{{ mo.input_qty }}</el-col>
          </el-row>
          <el-row>
            <el-col class="col-left" :span="8">当站产出: </el-col>
            <el-col class="col-right" :span="16">{{ mo.output_qty }}</el-col>
          </el-row>
        </div>
      </div>
      <div class="z-panel p-20 flex1">
        <div class="z-panel-title">捡料清单信息</div>
        <div class="z-panel-body">
          <el-table :data="materialList" ref="materialTable" :row-class-name="tableRowClassName" border
            style="width: 100%">
            <el-table-column width="65" type="index" label="序号"> </el-table-column>
            <el-table-column prop="type_name" label="物料类型" width="110"> </el-table-column>
            <el-table-column prop="key_part_no" label="料号"> </el-table-column>
            <el-table-column prop="key_part_name" label="物料名称" width="110"> </el-table-column>
            <el-table-column prop="qty" label="用量"> </el-table-column>
            <el-table-column prop="unit_code" label="单位"> </el-table-column>
            <el-table-column prop="wip_kpn_cnt" label="已采数量" width="110"> </el-table-column>
            <el-table-column prop="sequence" label="物料关系" width="110"> </el-table-column>
            <el-table-column prop="part_mode" label="捡料代码" width="110"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="p-20 z-panel z-border-l" style="width: 30%;">
        <div class="z-panel-title">已扫描产品序号列表</div>
        <div class="z-panel-body" style="margin-top:10px">
          <!-- <el-table :data="barcodeList" border style="width: 100%">
                        <el-table-column prop="time" label="生成日期"> </el-table-column>
                        <el-table-column prop="code" label="序号"> </el-table-column>
                    </el-table> -->
          <div v-for="(item, index) in snHistory" :key="index" style="margin:5px 0 5px 20px">
            <span>{{ index + 1 }}. </span><span>{{ item }}</span>
          </div>
        </div>
      </div>
    </div>
    <message-box :msgs="msgs"></message-box>
  </div>
</template>

<script>
import lineGroup from '@/components/WinClient/lineGroup'
import empScan from '@/components/WinClient/empScan'
import messageBox from '@/components/WinClient/messageBox'
import mixinClient from '@/views/_common/mixinClient'
import _ from 'lodash'
export default {
  name: 'materialCollect',
  mixins: [mixinClient],
  components: { lineGroup, empScan, messageBox },
  data() {
    return {
      scanMaterialData: '',
      mo: {},
      materialList: [],
      pageLoading: false,
      canScanMaterialFlag: true,
      canScanFlag: true,
      rowHeightObj: [],
      lineOptions: [],
      groupOptions: [],
      initData: {
        line: '',
        group: '',
        emp: '',
        empName: '',
      },
      empFocus: false,
      scanData: '',
      msgs: [],
      snHistory: [],
    }
  },

  created() {},
  methods: {
    checkLineGroup() {
      if (!this.initData.line) return this.showMessage('请选择线别')
      if (!this.initData.group) return this.showMessage('请选择工站')
      this.checkEmp()
    },
    checkEmp() {
      if (!this.initData.empName) {
        this.showMessage('请扫描作业员')
        this.empFocus = true
        return
      } else {
        this.afterScanEmp(true)
      }
    },
    afterScanEmp(r) {
      if (r) {
        setTimeout(() => {
          this.changeFocus('')
        }, 200)
      } else {
        this.showMessage('作业员不正确', true)
      }
    },
    tableRowClassName({ row, rowIndex }) {
      //获取每行的高度 用于滚动
      this.$nextTick((v) => {
        let rowList = document.getElementsByClassName('el-table__row')
        this.rowHeightObj[rowIndex] = rowList[rowIndex].offsetHeight
      })
      if (row.status === 1) {
        return 'warning-row'
      } else if (row.status === 2) {
        return 'success-row'
      }
      return ''
    },

    afterScan() {
      this.scanData = this.scanData.trim()
      if (!this.scanData) {
        this.showMessage('没有扫描到任何内容', true)
        return
      }
      this.pageLoading = true
      this.$request(
        this.$api.materialcollect + 'CheckPass',
        { ...this.initData, error_flag: 0, reply: true, sn: this.scanData },
        'post',
        true,
      )
        .then((r) => {
          this.pageLoading = false
          if (r) {
            this.mo = r.mo
            this.materialList = r.pickups
            this.changeFocus('material')
          }
        })
        .catch((e) => {
          this.pageLoading = false
          setTimeout(() => {
            this.$refs.scan.select()
          }, 200)
          this.showMessage(e.message, true)
        })
    },

    //扫描物料
    afterScanMaterial() {
      this.scanMaterialData = this.scanMaterialData.trim()
      if (!this.scanMaterialData) {
        this.showMessage('没有扫描到任何内容', true)
        return
      }
      this.scanMaterialData = this.scanMaterialData.toUpperCase()
      if (this.scanMaterialData.toUpperCase() == 'UNDO') {
        this.materialUndo()
        return
      }
      let data = _.cloneDeep(this.initData)
      data.sn = this.scanData
      data.kpsn = this.scanMaterialData
      this.pageLoading = true
      this.$request(this.$api.materialcollect + 'AddWIPKeyParts', data, 'post', true)
        .then((r) => {
          this.pageLoading = false
          if (r) {
            this.materialList = r.pickups
            this.$nextTick((v) => {
              document.getElementsByClassName('z-panel-body')[1].scrollTop = height / 2
            })
            //判断是否提交
            let finishedList = this.materialList.filter((v) => {
              return v.status === 2
            })
            if (finishedList.length == this.materialList.length) {
              this.passStation()
              this.snHistory.push(this.scanData)
              return
            }
            this.scanMaterialData = ''
            this.showMessage('请继续扫描物料', false)
          }
        })
        .catch((e) => {
          this.pageLoading = false
          this.showMessage(e.message, true)
        })
    },
    passStation() {
      this.pageLoading = true
      let data = _.cloneDeep(this.initData)
      data.sn = this.scanData
      this.$request(this.$api.wip + 'passstation', data, 'POST', true)
        .then((r) => {
          this.pageLoading = false
          if (r) {
            this.afterPassStation('请继续扫描下一产品序号', false)
          }
        })
        .catch((e) => {
          this.pageLoading = false
          setTimeout(() => {
            this.$refs.scan.select()
          }, 200)
          this.showMessage(e.message, true)
          this.scanTimes -= 1
        })
    },
    onClearGroupOrEmp() {
      this.clearScanData()
      this.initData.package_code = null
      this.checkLineGroup()
    },
    materialUndo() {
      this.scanMaterialData = ''
      this.clearScanData()
      this.changeFocus()
    },
    clearScanData() {
      this.scanData = ''
      this.scanMaterialData = ''
      this.materialList = []
      this.mo = {}
    },
    changeFocus(val) {
      if (val === 'material') {
        this.canScanMaterialFlag = true
        this.canScanFlag = false
        setTimeout(() => {
          this.$refs.scanMaterial.focus()
          this.$refs.scanMaterial.select()
        }, 200)
        this.showMessage('请扫描物料', false)
      } else {
        this.canScanMaterialFlag = false
        this.canScanFlag = true
        setTimeout(() => {
          this.$refs.scan.focus()
          this.$refs.scan.select()
        }, 200)
        this.showMessage('请扫描产品序号', false)
      }
    },
    afterPassStation(msg) {
      this.showMessage(msg, false)
      this.clearScanData()
      this.changeFocus()
    },
  },
  computed: {
    canScan: function () {
      return this.initData.line && this.initData.group && this.initData.empName && !this.canScanMaterialFlag
    },
    canScanMaterial: function () {
      return this.initData.line && this.initData.group && this.initData.empName && !this.canScanFlag
    },
    canSelectPackLevel: function () {
      return !this.initData.package_code
    },
    canInputEmp: function () {
      return !this.initData.empName && this.initData.line && this.initData.group
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/client.scss';
.z-panel-body .col-left {
  text-align: right;
  margin-bottom: 25px;
}
.z-panel-body .col-right {
  text-align: left;
  padding-left: 20px;
}
::v-deep .warning-row td {
  background-color: #e6a23c !important;
}
::v-deep .success-row td {
  background-color: #67c23a !important;
}
</style>
